//获取数据
function ajaxdata(){
	$.ajax({
		type:"get",
		url:"127.0.0.1:8082/front/dataView.htm",
		async:true,
		success:function  (data) {
		}
	});
};
ajaxdata();
//总授信客户数据
function ltop_echart() {
	var ltopChart = echarts.init(document.querySelector(".ltop-echart"));
var rich = {
    white: {
        color: '#9cbfde',
        align: 'left',
        padding: [10, 0]
    }
};
	var ltopdata = [{
			value: 80,
			name: '总授信客户数据'
		},
		{
			value:20,
			name: '用信额度'
		},
		{
			value: 20,
			name: '授信额度'
		}
	];
	var option = {
		textStyle:{
			color:"#9cbfde"
		},
		legend: {
			x: 'center',
			y: 'bottom',
			itemWidth: 12,
			itemHeight: 12,
			itemGap:45,
			borderRadius:0,
			top:'410px',
			textStyle: {
				color: "#9cbfde"
			},
            fontSize: 12,
			borderRadius: 0,
			data: [{
				name:ltopdata[0].name,
				icon:"rect"
			},
			{
				name:ltopdata[1].name,
				icon:"rect"
			},
			{
				name:ltopdata[2].name,
				icon:"rect"
			}]
		},
		color: ['#3278fa', '#e7536b', '#feab67'], //手动设置每个图例的颜色
		series: [{
			name: '面积模式',
			type: 'pie',
			radius: [55, 125],
			legendHoverLink:false,
			center: ['50%', '183px'],
			labelLine:{
				lineStyle:{
					color:"#26385a"
				},
				emphasis:{
					
				lineStyle:{
					color:"#9cbfde"
				},
				}
			},
			 itemStyle: {
		        normal: {
		            label: {
		                show: true,
		                formatter: function(params) {
		                    var percent = 0;
		                    var total = 0;
		                    for (var i = 0; i < ltopdata.length; i++) {
		                        total += ltopdata[i].value;
		                    }
		                    if(params.name !== '') {
		                        return params.name + '\n{white|' +params.value + '%}';
		                    }else {
		                        return '';
		                    }
		                },
		                rich: rich
		            },
		            
		        }
		    },
    
			data: ltopdata,
		}]
	}

	// 使用刚指定的配置项和数据显示图表。
	ltopChart.setOption(option);
}

//贷款发生区域分布数据统计
function vuc_echart() {
	var vucChart = echarts.init(document.querySelector(".vuc-echart"));
	
	var vucdata = [
     {name: '海门', value: 9},
     {name: '鄂尔多斯', value: 12},
     {name: '招远', value: 12},
     {name: '舟山', value: 12},
     {name: '齐齐哈尔', value: 14},
     {name: '盐城', value: 15},
     {name: '赤峰', value: 130},
     {name: '青岛', value: 50},
     {name: '乳山', value: 96},
     {name: '金昌', value: 130},
     {name: '泉州', value: 100},
     {name: '莱西', value: 21},
     {name: '日照', value: 21},
     {name: '胶南', value: 22},
     {name: '南通', value: 23},
     {name: '拉萨', value: 50},
     {name: '云浮', value: 150},
     {name: '梅州', value: 20},
     {name: '文登', value: 25},
     {name: '上海', value: 25},
     {name: '攀枝花', value: 150},
     {name: '威海', value: 25},
     {name: '承德', value: 25},
     {name: '厦门', value: 26},
    
];
var geoCoordMap = {
    '海门':[121.15,31.89],
    '鄂尔多斯':[109.781327,39.608266],
    '招远':[120.38,37.35],
    '舟山':[122.207216,29.985295],
    '齐齐哈尔':[123.97,47.33],
    '盐城':[120.13,33.38],
    '赤峰':[118.87,42.28],
    '青岛':[120.33,36.07],
    '乳山':[121.52,36.89],
    '金昌':[102.188043,38.520089],
    '泉州':[118.58,24.93],
    '莱西':[120.53,36.86],
    '日照':[119.46,35.42],
    '胶南':[119.97,35.88],
    '南通':[121.05,32.08],
    '拉萨':[91.11,29.97],
    '云浮':[112.02,22.93],
    '梅州':[116.1,24.55],
    '文登':[122.05,37.2],
    '上海':[121.48,31.22],
    '攀枝花':[101.718637,26.582347],
    '威海':[122.1,37.5],
    '承德':[117.93,40.97],
    '厦门':[118.1,24.46],
    
};

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};
	
	var option = {

    legend: {
        orient: 'vertical',
        left: 'left',
		itemWidth: 14,
		itemHeight: 14,
		top:'32px',
		left:'28px',
		textStyle: {
			color: "#9cbfde"
		},
        data:[{
        name:'申请客户区域分布',
		icon:"rect",
		}
		]
    },
	
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
            roam: false,
        itemStyle: {

            normal: {
                areaColor: '#1e2c47',
                borderColor: '#28ffff',
        	borderWidth:1,
            },
            emphasis: {
                areaColor: '#1e2c47'
            }
        }
    },
    series : [
        
		 {
            name: '申请客户区域分布',
            type: 'effectScatter',
            roam: false,
            coordinateSystem: 'geo',
            data: convertData(vucdata.sort(function (a, b) {
                return b.value - a.value;
            })),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: '#feab67',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
    ]
	}
	// 使用刚指定的配置项和数据显示图表。
	vucChart.setOption(option);
}

//每月授信额度、用信额度
function urtop_echart() {
	var urtopChart = echarts.init(document.querySelector(".urtop-echart"));
	
	var option = {
		textStyle:{
			color:"#9cbfde"
		},
   legend: {
			x: 'right',
			y: 'top',
			itemWidth: 12,
			itemHeight: 12,
			itemGap:40,
			borderRadius:0,
			top:'20px',
			left:'270px',
            fontSize: 12,
			borderRadius: 0,
			textStyle:{
			color:"#9cbfde"
			},
			data: [{
				name:'授信额度',
				icon:"rect"
			},
			{
				name:'用信额度',
				icon:"rect"
			}]
		},
		
		color: ['#03b3b3', '#e15963'], //手动设置每个图例的颜色
	    grid: {
	        left: '25px',
	        right: '27px',
	        bottom: '38px',
	        containLabel: true,
	        backgroundColor:"#fff"
	    },
	    xAxis: {
	        type: 'category',
	        boundaryGap: true,
	        axisLine:{
	        	lineStyle:{
	        		color:"#2e4068"
	        	}
	        },
	       
	        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月']
	    },
	    yAxis: {
	        type: 'value',
	        boundaryGap: true,
            splitLine:{
            	lineStyle:{
            		color:"#2e4068",
            		type:"dashed"
            	}
            },
	        axisLine:{
	        	lineStyle:{
	        		color:"#2e4068"
	        	}
	        },
	    },
		   series: [
        {
            name:'授信额度',
            type:'line',
            symbol:'circle',//拐点样式
            symbolSize:6,
            stack: '总量',
            itemStyle : {
					color:'#03b3b3',
					borderWidth:0,
					lineStyle:{
						color:'#03b3b3'
					}
			},
			lineStyle:{
				width:1
			},
            data:[1000, 1320, 1010, 1340, 900, 2300, 2100,1820, 1910, 2340,]
        },
        {
            name:'用信额度',
            type:'line',
            symbol:'circle',//拐点样式
            symbolSize:6,
            stack: '总量',
            itemStyle : {
						color:'#e15963',
					borderWidth:0,
					lineStyle:{
						color:'#e15963'
					}
			},
			lineStyle:{
				width:1
			},
            data:[2200, 1820, 1910, 2340, 2900, 3300, 3100,1820, 1910, 2340,]
        },
    ]
	}

	// 使用刚指定的配置项和数据显示图表。
	urtopChart.setOption(option);
}



//年龄分布
function urbottom_echart() {
	var urbottomChart = echarts.init(document.querySelector(".urbottom-echart"));
	var option = {
   
		textStyle:{
			color:"#9cbfde"
		},
   legend: {
			x: 'right',
			y: 'top',
			itemWidth: 12,
			itemHeight: 12,
			itemGap:30,
			borderRadius:0,
			top:'20px',
			left:'270px',
            fontSize: 12,
			borderRadius: 0,
			textStyle:{
			color:"#9cbfde"
			},
			data: [{
				name:'男客户比例',
				icon:"rect"
			},
			{
				name:'女客户比例',
				icon:"rect"
			}]
		},
    
		color: ['#3676fe', '#feab67'], //手动设置每个图例的颜色
    xAxis : [
        {
            type : 'category',
	        axisLine:{
	        	lineStyle:{
	        		color:"#2e4068"
	        	}
	        },
            data : ['18-28','29-38','39-48','49-58']
        }
    ],
    yAxis : [
        {
            type : 'value',
            splitLine:{
            	lineStyle:{
            		color:"#2e4068",
            		type:"dashed"
            	}
            },
	        axisLine:{
	        	lineStyle:{
	        		color:"#2e4068"
	        	}
	        },
        }
    ],
    series : [
        {
            name:'男客户比例',
            type:'bar',
            
            data:[100,10,150,460],
          
            
        },
        {
            name:'女客户比例',
            type:'bar',
            data:[350,56,200,450],
         
            
        }
    ]
	}

	// 使用刚指定的配置项和数据显示图表。
	urbottomChart.setOption(option);
}